<template>
    <div>

        <div class="content1">
            <div class="conlft" @click="gotoZhongzhi">
                <img src="@/assets/images/zhongzhi.png" alt="">
                <div class="black_div"></div>
                <!-- 黑色渐变 -->
                <div class="menu_font">
                    <p class="font1">我要种植</p>
                    <p class="font2">助力农户提升产品品质，打造优质农产品品牌</p>
                    <div class="font3">
                        <a href="" @click="gotoZhongzhi">进入耕者工坊</a>
                        <svg t="1753784366899" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="33471" width="24" height="24">
                            <path
                                d="M244.363636 556.939636h469.248l-184.762181 170.565819a34.909091 34.909091 0 1 0 47.36 51.29309l250.391272-231.121454a34.955636 34.955636 0 0 0 0-51.293091l-250.391272-231.121455a34.862545 34.862545 0 0 0-49.338182 1.95491 34.909091 34.909091 0 0 0 1.978182 49.338181l184.762181 170.565819H244.363636a34.909091 34.909091 0 1 0 0 69.818181"
                                fill="#ffffff" p-id="33472"></path>
                        </svg>
                    </div>
                </div>

            </div>
            <div @click="gotoShopping">
                <img src="@/assets/images/caigou.png" alt="">
                <div class="black_div"></div>
                <!-- 黑色渐变 -->
                <div class="menu_font">
                    <p class="font1">我要采购</p>
                    <p class="font2">严选优质农产品，保障食品安全</p>
                    <div class="font3">
                        <a href="" @click="gotoShopping">进入鲜采通道</a>
                        <svg t="1753784366899" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="33471" width="24" height="24">
                            <path
                                d="M244.363636 556.939636h469.248l-184.762181 170.565819a34.909091 34.909091 0 1 0 47.36 51.29309l250.391272-231.121454a34.955636 34.955636 0 0 0 0-51.293091l-250.391272-231.121455a34.862545 34.862545 0 0 0-49.338182 1.95491 34.909091 34.909091 0 0 0 1.978182 49.338181l184.762181 170.565819H244.363636a34.909091 34.909091 0 1 0 0 69.818181"
                                fill="#ffffff" p-id="33472"></path>
                        </svg>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
import router from '@/router';
export default {
    methods: {
        gotoZhongzhi() {
            router.push({name:'zspt'})

            // const routeLocation = router.resolve({
            //   name: 'zspt',
            // //   params: { id } //参数
            // })
            // window.open(routeLocation.href, '_blank')
            

        },
        gotoShopping() {
            router.push('/showall/TradingFloor/TFPage1')
        }
    },
}
</script>

<style scoped>
.content1 {
    background-color: #ffffff;
    height: 670px;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.content1>div {
    width: 880px;
    height: 520px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.black_div {
    position: absolute;
    top: 0;
    left: 0;
    width: 880px;
    height: 520px;
    opacity: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.menu_font {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 50px;
}

.font1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 32px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: middle;
    margin-bottom: 10px;
}

.font2,
.font3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    vertical-align: middle;
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.font3 {
    margin-top: 20px;
    display: flex;
    flex: 1;
}

img {
    width: 880px;
    height: 520px;
}

.black_div:hover{
    background: none;
}
</style>